<template>
  <div style="height: 100%">
    <div style="color: brown">
      费用明细（已勾选项目共计：<span class="mr5" style="color: blue">{{
        clinicOrdersCostList.length
      }}</span>个 || 已勾选费用总计：<span class="ml5 mr5" style="color: blue">{{
        sumPrice.toFixed(2)
      }}</span>元）
    </div>
    <el-table :border="true" :data="clinicOrdersCostList" :header-cell-style="$headerCellStyle"
              :span-method="objectSpanMethod"
              :stripe="true" height="100%" highlight-current-row>
      <el-table-column :align="'center'" label="申请单号" prop="applyNo" width="100"/>
      <el-table-column :align="'center'" label="项目类型" prop="itemClass" width="70">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['bill_item_class_dict']" :value="scope.row.itemClass"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="诊疗项目名称" prop="packItemName"
                       width="160"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="项目名称" min-width="200"
                       prop="itemName"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="项目编码" prop="itemCode" width="110"/>
      <el-table-column :align="'center'" label="单价" prop="price" width="100">
        <template #default="scope">
          <span class="ys-css">{{ parseFloat(scope.row.price).toFixed(2) }}</span>元
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="数量" prop="num" width="90">
        <template #default="scope"> {{ scope.row.num }}{{ scope.row.unitName }}</template>
      </el-table-column>
      <el-table-column :align="'center'" label="应收" prop="costs" width="110">
        <template #default="scope">
          <span class="ys-css">{{ parseFloat(scope.row.costs).toFixed(2) }}</span>元
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="实收" prop="charges" width="110">
        <template #default="scope">
          <span class="ys-css">{{ parseFloat(scope.row.charges).toFixed(2) }}</span>元
        </template>
      </el-table-column>
      <!-- <el-table-column label="医保自付比例" :align="'center'" prop="medicalScale" /> -->
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="规格" prop="spec" width="121"/>
      <el-table-column :align="'center'" label="审核标志" prop="medicalVerifyFlag" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.medicalVerifyFlag"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="是否上传" prop="isUpload" width="85">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.isUpload"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="厂家" prop="firmName" width="180"/>
    </el-table>
  </div>
</template>
<script lang="ts">
export default {
  name: "ClinicOrdersCost",
};
</script>

<script setup lang="ts">
import {listClinicOrdersCost} from "@/api/clinicOrder/clinicOrdersCost";

import {useDictStoreHook} from "@/store/modules/dict";
import {TableColumnCtx} from "element-plus";

const dictStore = useDictStoreHook();
let dictDataMap = ref(
  dictStore.isTypeGetData("bill_item_class_dict", "sys_yes_no", "reck_item_class_dict")
);
const emits = defineEmits(["setTotalPrice"]);
const {proxy} = getCurrentInstance() as any;
const sumPrice = ref<Number>(0.0);

const clinicOrdersCostList = ref([]);
const props = defineProps({
  ordersIds: {
    type: Array,
    default: () => [],
  },
});

const queryParams = {} as any;
watch(
  () => props.ordersIds,
  (nowValue) => {
    queryParams.ordersIdArray = nowValue;
    if (queryParams.ordersIdArray.length > 0) {
      getList();
    } else {
      clinicOrdersCostList.value = [];
      emits("setTotalPrice", 0);
    }
  }
);

/** 查询门诊项目明细列表 */
function getList() {
  let sum = 0.0;
  clinicOrdersCostList.value = [];
  queryParams.chargeFlag = "1"
  listClinicOrdersCost(queryParams).then((response: any) => {
    clinicOrdersCostList.value = response.data;
    clinicOrdersCostList.value.forEach((item: any) => {
      sum += Number(Number(item.charges).toFixed(2))
    });
    sumPrice.value = sum;
    emits("setTotalPrice", sumPrice.value);
  });
}

interface SpanMethodProps {
  row: any;
  column: TableColumnCtx<any>;
  rowIndex: number;
  columnIndex: number;
}

/** 表格合并列和行 */
function objectSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    const _row = flitterData(clinicOrdersCostList.value, columnIndex).one[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
}

/**合并表格的第一列，处理表格数据 */
function flitterData(arr, columnIndex) {
  let spanOneArr: any = [];
  let concatOne = 0;
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1);
    } else {
      //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
      if (columnIndex === 0) {
        if (item.applyNo === arr[index - 1].applyNo) {
          //第一列需合并相同内容的判断条件
          spanOneArr[concatOne] += 1;
          spanOneArr.push(0);
        } else {
          spanOneArr.push(1);
          concatOne = index;
        }
      } else if (columnIndex === 1) {
        if (
          item.itemClass === arr[index - 1].itemClass &&
          item.applyNo === arr[index - 1].applyNo
        ) {
          //第一列需合并相同内容的判断条件
          spanOneArr[concatOne] += 1;
          spanOneArr.push(0);
        } else {
          spanOneArr.push(1);
          concatOne = index;
        }
      } else if (columnIndex === 2) {
        if (
          item.itemClass === arr[index - 1].itemClass &&
          item.applyNo === arr[index - 1].applyNo &&
          item.packItemName === arr[index - 1].packItemName
        ) {
          //第三列需合并相同内容的判断条件
          spanOneArr[concatOne] += 1;
          spanOneArr.push(0);
        } else {
          spanOneArr.push(1);
          concatOne = index;
        }
      }
    }
  });
  return {
    one: spanOneArr,
  };
}
</script>
